<!-- 添加/编辑 收件地址-->
<template>
	<div class="add-address-panel">
		<nav-bar :back="1" :title="'我的信息'"></nav-bar>
		<div class="add-address">
			<van-form @submit="onSubmit">
				<van-field v-model="userInfo.RealName" name="RealName" label="姓名：" placeholder="填写您的姓名"
					:rules="name_rules" clearable maxlength="10" input-align="right"></van-field>
				<van-field v-model="userInfo.AgeNum" name="AgeNum" label="年龄：" placeholder="填写您的年龄 (如25岁)"
					:rules="age_rules" clearable maxlength="4" type="number" input-align="right"></van-field>
				<div class="SexType-picker" @click="pickerSwitch">
					<van-field v-model="userInfo.SexType" name="SexType" label="性别："
						placeholder="请选择您的性别" readonly input-align="right">
					</van-field>
					<div class="arrowsRight">
						<van-image width="100%" height="100%" :src="require('../../assets/imgs/arrowsRight.png')">
						</van-image>
					</div>
				</div>
				<van-field v-model="userInfo.CorpName" name="CorpName" label="所在机构：" placeholder="填写您所在的机构"
					clearable input-align="right"></van-field>
				<van-field v-model="userInfo.DeptName" name="DeptName" label="所在部门：" placeholder="填写您所在部门"
					clearable input-align="right"></van-field>
				<van-field v-model="userInfo.PostName" name="PostName" label="目前岗位：" placeholder="填写您现在的职位"
				  clearable input-align="right"></van-field>
				<van-field v-model="userInfo.Tel" name="Tel" label="联系电话：" placeholder="填写您的联系方式"
					:rules="mobile_rules" clearable input-align="right"></van-field>
				<van-field v-model="userInfo.Email" name="Email" label="联系邮箱：" placeholder="填写您的邮箱地址"
					:rules="post_rules" clearable input-align="right"></van-field>
				<div class="addAddress-btn">
					<button class="btn main-btn" round block type="info" native-type="submit">
						确认
					</button>
				</div>
			</van-form>
		</div>
		<!-- <ProvincesPicker :show="showPicker" :pickerSwitch="pickerPickerSwitch" :selectResult="selectResult">
		</ProvincesPicker> -->
		<van-picker
			class="selectModal"
			title="性别"
      show-toolbar
			:columns="columns"
			@confirm="onConfirm"
			@cancel="onCancel"
			v-show="showPicker"
		/>
	</div>
</template>

<script>
	import {
		Toast,
		Dialog,
		Picker
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'

	import {
		mymessage_api
	} from '../../api/index.js'

	export default {
		name: 'addressedit',
		components: {
			NavBar,
		},
		activated() {
			this.userInfo = {};
			this.getMyUserInfo()
		},
		data() {
			return {
				showPicker: false,
				name_rules: [{
					required: true,
					message: '请填写您的姓名',
				}],
				mobile_rules: [{
					validator: (value) => {
						return /^1[3|4|5|8|7|9][0-9]\d{8}$/.test(value)
					},
					message: '请输入正确的11位手机号码',
				}],
				age_rules: [{
					validator: (value) => {
						return value>0
					},
					message: '请输入正确的年龄',
				}],
				province_rules: [{
					required: true,
					message: '请选择性别',
				}],
				post_rules: [{
					validator: (value) => {
						return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
					},
					message: '请输入正确的邮箱',
				}],
				address: {},
				is_alter: false,
				columns: ['男','女'],
				userInfo: {},
			}
		},
		methods: {
			rollback() {
				this.$router.back(-1)
			},
			rollbackIntercept() {
				//回退拦截
				// Dialog.confirm({
				// 		width: '5.4rem',
				// 		title: '确认退出',
				// 		message: '你确定放弃编辑直接退出吗',
				// 		confirmButtonText: '确定',
				// 		confirmButtonColor: '#F7383C',
				// 		cancelButtonText: '我再想想',
				// 		cancelButtonColor: '#666666',
				// 	})
				// 	.then(() => {
				// 		this.rollback()
				// 	})
				// 	.catch(() => {
				// 		// on cancel
				// 	})
			},
			setLinkman(value) {
				let userInfo = this.userInfo
				userInfo.linkman = value
				this.userInfo = userInfo
			},
			pickerPickerSwitch() {
				this.showPicker = false
			},
			pickerSwitch() {
				this.showPicker = !this.showPicker
			},
			selectResult(result) {
				this.pickerSwitch()
				let userInfo = this.userInfo
				userInfo.province = result
				this.userInfo = userInfo
			},
			//手机号码校验
			validator(value) {
				return /^1[3|4|5|8|7|9][0-9]\d{4,8}$/.test(value)
			},
			validator2(value) {
				return /^[1-9]\\d{5}$/.test(value)
			},
			onConfirm(value, index) {
				console.log(value, index);
				this.userInfo.SexType = value;
				this.showPicker = false;
			},
			onCancel() {
				this.showPicker = false;
			},
			//提交表单
			onSubmit(values) {
				console.log('submit', values)
				let data = {
					...values,
					...{Id: this.id}, //0新增，大于0编辑
					// "RealName": "真实姓名",
					// "AgeNum": "年龄",
					// "SexType": "性别(男，女)",
					// "CorpName": "所在公司",
					// "DeptName": "所在部门",
					// "PostName": "目前岗位",
					// "Email": "邮箱",
					// "Tel": "联系电话"
				}
				mymessage_api.setMyUserInfo(data, (res) => {
					console.log(res)
					if (this.id > 0) {
						Toast('修改成功')
					} else {
						Toast('添加成功')
					}
					setTimeout(() => {
						this.rollback()
					}, 1000)
				})
			},
			getMyUserInfo() {
				mymessage_api.getMyUserInfo((res) => {
					console.log(res)
					this.userInfo = res
				})
			}
		},
		computed: {
			// userInfo: {
			// 	get() {
			// 		if (this.is_alter) {
			// 			return this.address
			// 		} else {
			// 			return this.params
			// 		}
			// 	},
			// 	set(data) {
			// 		this.is_alter = true
			// 		this.address = data
			// 		console.log(data)
			// 		// this.userInfo = data
			// 	},
			// },
			params() {
				if (this.$route.params.address) {
					return this.$route.params.address
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).address
				} else {
					return {
						linkman: '',
						mobile: '',
						province: {
							value: '',
							Ids: [],
						},
						address: '',
						// postalCode: '',
					}
				}
			},
			id() {
				if (this.$route.params.id) {
					return this.$route.params.id
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).id
				} else {
					return 0
				}
			},
		},
	}
</script>

<style>
	.van-field__label {
		width: 1.6rem;
		margin: 0;

		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	/* 提示框 */
	.van-dialog__header {
		padding-top: 0.78rem;
		font-weight: 600;
		font-size: 0.32rem;
		line-height: 0.4rem;
		text-align: center;
	}

	.van-dialog__message {
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.4rem;
		padding: 0.48rem 0.4rem 0.6rem;
	}
	.SexType-picker .van-cell__value{
		padding-right: 0.2rem;
	}
</style>

<style scoped>
	.add-address-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background-color: #f6f5fb;
	}

	.add-address {
		min-height: calc(100vh - 0.88rem);
	}

	.provinces-picker {
		position: relative;
	}

	.arrowsRight {
		position: absolute;
		width: 0.14rem;
		height: 0.28rem;

		top: calc(50% - 0.14rem);
		right: 0.3rem;
	}

	.addAddress-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.btn {
		margin-bottom: 0.3rem;
	}
	.van-cell{
		line-height: 0.64rem;
	}
	.selectModal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
		border-top: 0.02rem solid #eee;
  }
	.SexType-picker{
		position: relative;
		
	}
</style>
